<template>
  <div>
    <Row>
      <i-col span="24">
        <Form ref="searchParams" :model="searchParams" label-position="right" inline>
          <FormItem>
            <Input type="text" v-model="searchParams.truckPlate" placeholder="车号"></Input>
          </FormItem>
          <FormItem>
            <Input type="text" v-model="searchParams.fleetName" placeholder="车队名称"></Input>
          </FormItem>
          <FormItem>
            <Input type="text" v-model="searchParams.driverName" placeholder="司机名称"></Input>
          </FormItem>
          <FormItem>
            <Input type="text" v-model="searchParams.containerNoBody" placeholder="集装箱号"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch" icon="ios-search">
              查询
            </Button>
          </FormItem>
        </Form>
      </i-col>
    </Row>
    <tablePage ref="containerTab" :api="getIsBindingSubOrderList" :param="searchParams">
      <template slot-scope="props">
        <Table :columns="containerColumn" :data="props.data"></Table>
      </template>
    </tablePage>
  </div>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  import { getIsBindingSubOrderList, updateSunOrderGuardSubmit } from '@api/backEnd/station'

  export default {
    name: '',
    data () {
      let searchParams = {
        truckPlate: '',
        fleetName: '',
        driverName: '',
        containerNoBody: ''
      }
      let containerForm = {
        local_city_id: null,
        product_type: 3,
        isMine: 0,
        page: 1,
        pageSize: 10,
        msg_type: null
      }
      let tabParam = {
        // productType: 3,
        // msgType: '',
        // localCityId: '',
        // needCityId: '',
        // isMine: 0,
        isBind: 0
      }
      let localCityId = []
      let containerColumn = [
        {
          title: '车号',
          key: 'truckPlate',
          width: 155,
          align: 'center'
        },
        {
          title: '车队名称',
          ellipsis: true,
          align: 'center',
          key: 'fleetName'
        },
        {
          title: '司机名称',
          ellipsis: true,
          align: 'center',
          key: 'driverName'
        },
        // {
        //   title: '车型',
        //   align: 'center',
        //   key: 'train_type'
        // },
        {
          title: '集装箱字母',
          ellipsis: true,
          align: 'center',
          key: 'containerNoHead'
        },
        {
          title: '箱号',
          ellipsis: true,
          align: 'center',
          key: 'containerNoBody'
          // render: (h, params) => {
          //   return (params.row.container_no_head + params.row.container_no_body)
          // }
        }
      ]
      let operatBtn = {
        title: '操作',
        key: 'guardConfirmTime',
        align: 'center',
        render: (h, params) => {
          let viewDispatchBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.dispatchBind(params.row)}>确认出场</i-button>)
          let viewEndBtn = (<i-button type="warning" size="small" style="margin-right: 5px;">已确认</i-button>)
          let btnArray = ''
          if (!params.row.guardConfirmTime) {
            btnArray = viewDispatchBtn
          } else {
            btnArray = viewEndBtn
          }
          return (btnArray)
        }
      }
      containerColumn.push(operatBtn)
      let datas = { containerForm, localCityId, tabParam, containerColumn, getIsBindingSubOrderList, searchParams }
      return datas
    },
    props: {
      // 城市列表
      cityList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
      dispatchBind (val) {
        let param = {
          driverId: val.driverId,
          subOrderId: val.orderNo,
          fleetOrderDetailId: val.fleetOrderDetailId
        }
        updateSunOrderGuardSubmit(param).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$Notice.success({
              title: '成功',
              desc: res.data.res
            })
            this.$refs['containerTab'].dataRefresh()
          } else {
            this.$Notice.error({
              title: '警告',
              desc: res.data.res
            })
          }
        }).catch((err) => {
          console.log('updateSunOrderGuardSubmit:' + err)
        })
      },
      handleSearch () {
        this.$refs['containerTab'].dataRefresh()
      }
    },
    components: { tablePage }
  }
</script>
<style scoped>
  .lh-32 {
    line-height: 32px;
    margin-right: 5px;
  }
</style>
